<template>
    <div class="text_list_box">
        <el-table
            ref="tableRef"
            :data="data"
            height="400"
            max-height="550"
            tooltip-effect="light"
            class="table_box"
            header-row-class-name="table_header_title">
            <el-table-column width="50" align="center">
                <template #default="scope">
                    <div class="icon_box" @click="changeMaterial(scope.row)">
                        <img
                            v-if="selectList?.some(el => el.id == scope.row.id)"
                            src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1693986289248fcber26epvebpzes.png"
                            alt="" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="文件信息" width="400" align="left">
                <template #default="scope">
                    <div class="file_box">
                        <img class="suffix_icon" :src="getSuffixIcon(scope.row?.mediaFileInfo?.absolute_url)" alt="" />
                        <span>{{ scope.row?.mediaFileInfo?.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="大小" align="center">
                <template #default="scope">
                    <div class="radar_box">
                        <span>{{ (scope.row?.mediaFileInfo?.size / 1024).toFixed(2) }} Kb</span>
                        <img
                            v-if="scope.row?.is_radar == 1"
                            class="radar_icon"
                            src="https://img.static-keyid.cn/toolspace/scrm/2023/09/1693986312004j1tg8uz6944ojpzu.png"
                            alt="" />
                    </div>
                </template>
            </el-table-column>
            <template #empty>
                <Empty />
            </template>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import Empty from '../components/Empty.vue';
import { ref, reactive, watch, computed, onMounted, withDefaults } from 'vue';
import { ElMessage } from 'element-plus';
import { getSuffixIcon } from '../utils/material';

interface Props {
    /** 选中数据 */
    modelValue: Array<any>;
    /** table数据 */
    data: Array<any>;
    /** 是否多选 */
    multiple?: boolean;
    /** 选中素材总数 */
    selectTotalNum: number;
    /** 剩余可选中数量 */
    remainNum: number;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => [],
    remainNum: 1,
    multiple: true,
    selectTotalNum: 9
});

const emit = defineEmits(['update:modelValue']);

const selectList = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

/**
 * 选中/取消
 * @param item
 */
const changeMaterial = (item: any) => {
    const index = selectList.value.findIndex(el => el.id == item.id);

    if (props.remainNum <= 0 && index == -1) {
        ElMessage.error(`最多可选${props.selectTotalNum}个素材`);
        return;
    }
    if (props.multiple) {
        if (index == -1) {
            selectList.value.push({ ...item, sortTime: +new Date() });
        } else {
            selectList.value.splice(index, 1);
        }
    } else {
        selectList.value.splice(0);
        selectList.value.push({ ...item, sortTime: +new Date() });
    }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.text_list_box {
    width: 100%;

    .file_box {
        display: flex;
        align-items: center;

        .suffix_icon {
            width: 40px;
            height: 40px;
            margin-right: 5px;
        }
    }

    .radar_box {
        display: flex;
        font-size: 14px;

        .radar_icon {
            margin-left: 10px;
            width: 20px;
            height: 20px;
        }
    }
}

.icon_box {
    width: 14px;
    height: 14px;
    background: white;
    border-radius: 1px;
    border: 1px solid #eee;
    overflow: hidden;
    cursor: pointer;

    img {
        display: block;
        width: 100%;
        height: 100%;
    }
}
</style>
